<template>
    <el-container class="header">
      <el-header class="header-content" style="height: 40px;">
        <a href="https://gitee.com/majunmeng/mmblog-client" class="header-a">
          MmBlog
        </a>
        <ul class="header-navBar">
          <li  class="navBarContent" v-for="(item,index) in menus" :key="index" 
              @mouseover="addActive($event)" @mouseout="removeActive($event)"
          >
            <a href="www.baidu.com" class="navBarContent-a">
              <span class="iconfont" >{{item.icon}}</span>
              <span>{{item.title}}</span>
            </a>
          </li>
          <li class="navBarContent-login">
            <a href="www.baidu.com" class="navBarContent-login-a">
              <span class="iconfont">&#xe70a;</span>
              <span>登录</span>
            </a>
          </li>
        </ul>
      </el-header>
    </el-container>
</template>

<script>
export default {
    name:'HomeHeader',
    data() {
      return {
        menus:[{
          title:'首页',
          icon:'\ue613'
        },{
          title:'分类',
          icon:'\ue638'
        },{
          title:'标签',
          icon:'\ue637'
        },{
          title:'关于',
          icon:'\ue63e'
        },{
          title:'归档',
          icon:'\ue602'
        },
      ]
      }
    },
    methods: {
      addActive($event){
        $event.currentTarget.className="rmnavBarContent"
      },
      removeActive($event){
        $event.currentTarget.className="navBarContent"
      }
    },
}

</script>
<style lang='less' scope>
    .header{
      width: 100%;
      padding-top: 20px;
      position: relative;
      z-index: 2;
    }
    .header-content{
      margin-left: 245px;
      overflow: hidden;
      height: 30px;
      z-index: 2;
    }
    .header-a{
      font-size: 30px;
      color:#fff;
      font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      font-weight: bold;
      float: left;

    }
    .header-navBar{
      float: right;
      font-size: 20px;
      height: 100%;
      width: 500px;
      margin-right: 50px;
      font-family:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      line-height: 2.2;
    }
    .navBarContent{
      height: 100%;
      width: 60px;
      float: left;
      text-align: center;
      margin-left: 10px;
    }
    .rmnavBarContent{
      height: 100%;
      width: 60px;
      float: left;
      text-align: center;
      background-color:rgba(108,108,108,0.2);
      border-radius: 5px;
      margin-left: 10px;
    }
    .navBarContent-a{
      position: relative;
      color: #fff;
      z-index: 4;
    }
    .header-navBar-icon{
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
    .navBarContent-login{
      height: 100%;
      width: 60px;
      float: left;
      text-align: center;
      padding-left: 50px;
    }
    .navBarContent-login-a{
      position: relative;
      color: #fff;
      z-index: 4;
    }
</style>